<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import geoCoord from "@/data/odline-geocoord"
import srcMigrationData from "@/data/odline-srcmigration"

export default {
  name: "AddOdlineCurves.component",
  components: {Maptalks},
  setup() {

    const getGeoCoord = (name) => {
      let city = name.split("_").pop();
      let coord;
      coord = geoCoord[city];
      return coord;
    }

    let mapOnLoadCB = (map) => {
      map.setZoom(6)

      let lines = srcMigrationData.allLine.map(function (line) {
        return {
          "coordinates": [
            map.getCenter().toArray(),
            getGeoCoord(line.end)
          ]
        };
      });

      // destination markers
      let destinations = lines.map(function (ln) {
        return new maptalks.Marker(ln["coordinates"][1], {
          "symbol": {
            "markerType": "ellipse",
            "markerFill": "rgba(248,3,11,0.4)",
            "markerLineWidth": 2,
            "markerWidth": 4,
            "markerHeight": 4
          }
        })
      })

      new maptalks.VectorLayer(MapLayerConst.MAP_OD_LINE_CURVES_MARKER_LAYER).addGeometry(destinations).addTo(map);

      //curves
      let lineLayer = new maptalks.ODLineLayer(MapLayerConst.MAP_OD_LINE_BASE_LAYER, lines, {
        "animation": false,
        "curveness": 0.5,
        "random": true,
        "symbol": {
          "lineWidth": 2,
          "color": "rgba(3,145,248,0.4)"
        }
      }).addTo(map);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>